<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表整理</title>
    <style>
        .area_main{
            display: flex;
            flex-wrap: wrap;
        }
        .area{
               height: 15vw;
               width:500px;
            }
    </style>
</head>
<body>
    <div class="area_main">
        <!-- 混合图 -->
        <div id="column-spline" class="area"></div>
        <div id="dc_changeYear" style="width: 500px;height:15vw;"></div>
        <!-- 曲线图 -->
        <div id="spline" class="area"></div>
        <!-- 环形图 -->
        <div id="pie" class="area"></div>
        <!-- 柱状图 -->
        <div id="column" class="area"></div>
        <div id="bar" class="area"></div>
        <div id="area_purchaseNums" style="width: 500px;height:15vw;"></div>
        <!-- 折线图 -->
        <!-- <div id="line" class="area"></div> -->
        <!-- 雷达图 -->
        <div id="area_radarmap" style="width: 500px;height:15vw;"></div>
        <!-- 半圆环形图 -->
        <div id="area_rankList" style="width: 500px;height:15vw;"></div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./echarts-5.0.2/echarts.js"></script>
<script src="./Highcharts-4.2.5/highcharts.js"></script>
<script>
    // 混合图
    var chart1 = Highcharts.chart('column-spline', {
            chart: {
                zoomType: 'xy',
                marginTop:35,
            },
            title: {
                text: '',
                align:"left"
            },
            xAxis: [{
                categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                    '7月', '8月', '9月', '10月', '11月', '12月'],
                crosshair: true,
                labels: {
                    style: {
                        color: "rgba(0, 0, 0, 0.5)"
                    }
                }
            },
            ],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}',
                    style: {
                        color: "rgba(0, 0, 0, 0.5)"
                    }
                },
                title: {
                    text: '单',
                    style: {
                        color: "rgba(0, 0, 0, 0.5)"
                    },
                    align: 'high',
                    offset: 0,
                    rotation: 0,
                    y: -8,
                    x:8
                }
            }, { // Secondary yAxis
                title: {
                    text: '百分比',
                    style: {
                        color:"rgba(0, 0, 0, 0.5)"
                    },
                    align: 'high',
                    offset: 0,
                    rotation: 0,
                    y: -8,
                    x:-30,
                },
                labels: {
                    format: '{value}',
                    style: {
                        color: "rgba(0, 0, 0, 0.5)"
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                // layout: 'vertical',
                x: 0,
                verticalAlign: 'top',
                y: -10,
                floating: true,
                backgroundColor: '#FFFFFF'
            },
            series: [{
                name: '退单量',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                tooltip: {
                    valueSuffix: ' 单'
                },
                color:"#5E6EFF"
            }, {
                name: '退单率',
                type: 'spline',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                tooltip: {
                    valueSuffix: '%'
                },
                color:"#A0D176"
            }]
        });
    // 曲线图
    var chart2 = Highcharts.chart('spline', {
            chart: {
                type: 'spline',
                marginTop:40
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            legend:{
                enabled: false
            },
            xAxis: {
                categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                labels: {
                    style: {
                        color: "rgba(0, 0, 0, 0.5)"
                    }
                },
                // plotLines:[{
                //     color:'red',            //线的颜色，定义为红色
                //     dashStyle:'ShortDashDot',//标示线的样式，默认是solid（实线），这里定义为长虚线
                //     value:3,                //定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
                //     width:2                 //标示线的宽度，2px
                // }]
            },
            yAxis: {
                title: {
                    text: ''
                },
                labels: {
                    style: {
                        color: "rgba(0, 0, 0, 0.5)"
                    }
                }
            },
            plotOptions: {
                spline: {
                    dataLabels: {
                        // 开启数据标签
                        enabled: true,
                        color:'#3A66FE',
                        style:{textShadow:'none'}
                    },
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    enableMouseTracking: false,
                    color:'#3A66FE'
                }
            },
            series: [{
                name: '时长',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    // 环形图
    var chart3 = Highcharts.chart("pie", {
            chart: {
                spacing : [40, 0 , 40, 0]
            },
            colors:['#3596FE','#C466FE','#FF982E','#FF6461','#6467FF','#33CD95','#A0D176','#C1E3FF','#FCD76C','#FFB3B3'],
            title: {
                floating:true,
                text: '退单类型',
                style:{
                    fontSize:'14px'
                }
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        // format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        formatter:function () {
                            return '<span style="color: '+ this.color +'">'+ this.point.name +'：'+ this.point.percentage.toFixed(1) +'%</span>';
                            },
                        style: {

                        }
                    },
                    point: {
                        events: {
                            mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                                // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                                chart3.setTitle({
                                    text: e.target.name+ '\t'+ e.target.y + ' %'
                                });
                            },
                            click: function(e) { // 同样的可以在点击事件里处理
                                return null;
                                // chart.setTitle({
                                //
                                //     text: e.point.name+ '\t'+ e.point.y + ' %'
                                // });
                            }
                        }
                    },
                }
            },
            series: [{
                size: '100%',
                innerSize: '70%',
                type: 'pie',
                name: '市场份额',
                data: [
                    ['附件不全',    8.5],
                    ['票据不合规',    8.5],
                    ['签批手续不全',    8.5],
                    ['报销业务内容不合规',    8.5],
                    {name:'数据不合规',   y: 45.0, url : 'http://bbs.hcharts.cn'},
                    ['报销日期过期',       26.8],
                    {
                        name: '报销信息缺失',
                        y: 12.8,
                        sliced: true,
                        selected: true,
                        url: 'http://www.hcharts.cn'
                    },
                    ['预约科目有误',    8.5],
                    ['预约超时',     6.2],
                    ['其他原因',   0.7]
                ]
            }]
        }, function(c) { // 图表初始化完毕后的会掉函数
            // 环形图圆心
            var centerY = c.series[0].center[1],
                titleHeight = parseInt(c.title.styles.fontSize);
            // 动态设置标题位置
            c.setTitle({
                y:centerY + titleHeight/2
            });
        });
    // 柱状图
    var chart4 = Highcharts.chart('column', {
        chart: {
                type: 'column'
            },
            title: {
                text:""
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                }
            },
            exporting: {
                enabled: false
            },
            xAxis: {
                labels:{
                    rotation:0,//禁止文字倾斜
                    // align:'left',
                },
                categories:["人员一<br/>2064","人员二<br/>2064","人员三<br/>2064","人员四<br/>2064","人员五<br/>2064",
                "人员六<br/>2064","人员七<br/>2064","人员八<br/>2064","人员九<br/>2064","人员十<br/>2064"],
            },
            yAxis: {
                // gridLineWidth:0,
                gridLineColor:'#F4F4F4',//网格线颜色
                title:"退单率",
                labels:{
                    enabled:false
                }
            },
            tooltip:{
                enabled:false
            },
            legend:{
                enabled:false
            },
            series: [{
                name: '退单率（%）',
                data: [1,2,3,4,5,6,7,8,9,10],
                color:{
                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
                    stops: [[0, '#3596FE'],[1, '#6467FF']]
                },
                // minPointLength:5
            }],
            //数据标签
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true,
                        color:'#3A66FE',
                        style:{
                            textShadow: 'none'
                        },
                        crop:false,
                        // overflow: 'none',
                        formatter:function () {
                            return this.y + "%";
                        }
                    }
                }
            }
    });
    // 条形图
    $("#bar").highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      style:{},
      useHTML:true,
      text:"<span style='display: inline-block;width: 80px;height:26px;line-height:26px;background: rgba(6, 100, 235, 0.15);border-radius: 13px;color: rgba(0, 0, 0, 0.75);text-align: center;font-size: 16px;'>单位</span>"
    },
    plotOptions: {
      series: {
        label: {
          connectorAllowed: false
        },
      }
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      labels:{
          rotation:0,//禁止文字倾斜
      },
      categories: ["工学院", "综合办公室", "组织人事部","财务部"]
    },
    // data:[
    //
    // ],
    yAxis: {
      // gridLineWidth:0,
      title:"退单率",
      gridLineColor:'#F4F4F4',//网格线颜色
      labels:{
        enabled:false
      }
    },
    tooltip:{
      enabled:false
    },
    legend:{
      enabled:false
    },
    series: [{
      name: '退单率（%）',
      data: [1.98,2.5,2.94,],
      color:{
          linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
          stops: [[0, '#3785D9'],[1, '#354BA9']]
      }
    }],
    //  数据标签
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                color:'#354BA9',
                style:{
                    textShadow: 'none'
                },
                crop:false,
                // overflow: 'crop',
                formatter:function () {
                    return this.y + "%";
                }
            }
        }
    }
  });
    /*
    * echarts图表
    */ 
    // 条形图
    createPurchaseNum();
    function createPurchaseNum() {
            var chartDom = document.getElementById('area_purchaseNums');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    show:false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    // data: ['件数'],
                    show:false
                },
                grid: {
                    left: '0%',
                    right: '10%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    position:'top',
                    name:"件数",
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['累计废弃处置量','当前请购量', '当前存量数']
                },
                series: [
                    {
                        name: '件数',
                        type: 'bar',
                        data: [56,43,37],
                        label: {
                            show: true,
                            position: 'right',
                            valueAnimation: true
                        },
                        itemStyle:{
                            normal:{
                                color: function(params) {
                                    var colorList = [
                                        '#6E8CEE','#CED8FF','#2F4C95'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                            }
                        }
                    },
                ]
            };
            option && myChart.setOption(option);
        };
    // 雷达图
    createRadarmap();
    function createRadarmap() {
        var chartDom = document.getElementById('area_radarmap');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            tooltip: {},
            legend: {
                show:false
            },
            radar:[
                {
                    // radius:'50%',
                    nameGap : 10, // 指示器名称和指示器轴的距离
                    center:['50%','55%'], // 图的位置
                    name:{
                        formatter: '{value}',
                        textStyle:{
                            color:'rgba(0,0,0,.65)',
                            borderColor: 'rgba(146, 172, 254, 1)',
                            // borderWidth:2,
                            borderStyle:'solid',
                            borderTopWidth:0,
                            borderLeftWidth:0,
                            borderRightWidth:0,
                            borderBottomWidth:2,
                        }
                    },
                    indicator : [
                        {text : '剧毒品', max  : 100},
                        {text : '易制爆化学品', max  : 100},
                        {text : '一般危险品', max  : 100},
                        {text : '气体钢瓶', max  : 100},
                        {text : '易制毒化学品', max  : 100}
                    ],
                    splitArea : {
                        show : true,
                        areaStyle : {
                            color: ["rgb(244,245,246)"],  // 图表背景颜色
                        }
                    },
                    splitLine : {
                        show : true,
                        lineStyle : {
                            width : 1,
                            color : 'rgb(148,154,170)' // 图表背景网格线的颜色
                        }
                    }
                }
            ],
            series: [{
                //name: '',
                type: 'radar',
                lineStyle:{
                    color:'#6D8CEE',
                },
                areaStyle: {
                    color:"#6D8CEE",
                    normal: {},
                },
                data: [
                    {
                        value: [20, 40, 50, 20, 45],
                        name: '购买量',
                        // itemStyle: {
                        //     normal: {
                        //         areaStyle: {
                        //
                        //         }
                        //     }
                        // },
                    }
                ],
                itemStyle:{
                    color: '#6D8CEE',
                    borderColor: '#6D8CEE',
                }
            }]
        };
        option && myChart.setOption(option);
    }
    // 半圆环形图
    createRankList();
    function createRankList() {
        var myChart = echarts.init(document.getElementById( 'area_rankList' ));
        var option = {
            title: {
                //"text": '20%',
                //subtext:'药剂1',
                itemGap:3,
                "x": '49%',
                "y": '50%',
                textAlign: "center",
                "textStyle": {
                    "fontWeight": 'bold',
                    "fontSize": 15,
                    color:'#263355',

                },
                "subtextStyle": {
                    "fontWeight": 'normal',
                    "fontSize": 14,
                    color:'rgba(0,0,0,.65)',
                    lineHeight:14
                },
            },
            tooltip: {
                trigger: 'item',
                alwaysShowContent: true,
                extraCssText:'box-shadow:none',
                formatter:function(params){
                    return "<p class='tc'><span class='' style='color:#263355;font-weight: bold'>"+
                        parseFloat(params.percent)* 2 +"%</span><br/>" + params.name+"</p>"
                },
                borderColor:'#ffffff',
                position: ['43%', '50%'],
                axisPointer:{
                    type:'shadow',
                }
            },
            legend: {
                type:'scroll',
                selectedMode:false,
                bottom:0,
                data:['药剂1','药剂2','药剂3','药剂4','药剂5','药剂6','药剂7','药剂8','药剂9','药剂10']
            },
            "color": ["#577DF4","#163688","#C3D1FA","#F6E68A","#F390A0","#FF974C","#E65A56","#6D61E4","#4A6FE2","#6D9AE7", "transparent"],
            "startAngle": 180,
            series: [
                {
                    name:'',
                    type:'pie',
                    radius: ['60%', '100%'],
                    avoidLabelOverlap: false,
                    startAngle: 180,
                    center:["50%","70%"],
                    selectedOffset: 30,
                    label: {
                        normal: {
                            position: 'inner',
                            textStyle: {
                                color: 'rgba(0,0,0,.65)',
                                fontSize: 12
                            }
                        },
                    },
                    emphasis: {
                        show: true,
                        scale:true,
                        scaleSize:15,
                        label:{
                            show:true
                        },
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[{value:40, name:'药剂1'},{value:50, name:'药剂2'},{value:46, name:'药剂3'},{value:40, name:'药剂4'},
                        {value:10, name:'药剂5'},{value:20, name:'药剂6'},{value:16, name:'药剂7'},{value:42, name:'药剂8'},
                        {value:25, name:'药剂9'},{value:30, name:'药剂10'},{value:319, name:'',tooltip:{formatter:function(a){return ""}}}]
                },
            ]
        };
        myChart.setOption( option );
    }

    //混合图
    createDcYearChange();
    function createDcYearChange() {
            var chartDom = document.getElementById('dc_changeYear');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['请购量', '存量', '活跃量','废弃物处置量']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '单位：kg',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} kg'
                        }
                    },
                    {
                        type: 'value',
                        name: '单位:个',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} 个'
                        }
                    }
                ],
                series: [
                    {
                        name: '请购量',
                        color:'#6E8CEE',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 16.7, 25.6, 12.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '存量',
                        color:'#CED8FF',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 20.7, 15.6, 18.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name: '活跃量',
                        color:'#263355',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    },
                    {
                        name: '废弃物处置量',
                        color:'#ED4D67',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [1.0, 2.2, 3, 2.5, 4.3, 3.2, 10.3, 13.4, 20.0, 13.5, 6.0, 2.2]
                    }
                ]
            };
            option && myChart.setOption(option);
        }
</script>
</html>